<div class="filter-container">
            <el-button
              v-waves
              size="small"
              class="filter-item"
              type="primary"
              icon="el-icon-plus"
              @click="addRow"
            >添加</el-button>
            <el-input
              v-model="listQuery.title"
              size="small"
              clearable
              placeholder="分类名称"
              style="width: 220px;"
              class="filter-item"
              @keyup.enter.native="getList"
            />
            <el-select
              v-model="listQuery.status"
              size="small"
              placeholder="上线状态"
              class="filter-item"
              clearable
            >
              <el-option
                v-for="(opt) in $constants.goodsStatusOptions"
                :key="opt.value"
                :label="opt.title"
                :value="opt.value"
              />
            </el-select>
            <el-button
              v-waves
              size="small"
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="getList"
            >搜索</el-button>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="ID" width="150px" align="center">
              <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column label="分类名称" width="150px" align="center">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column label="父分类" width="200px" align="center">
              <template slot-scope="scope">{{ scope.row.parent_name }}</template>
            </el-table-column>
            <el-table-column label="封面" width="200px" align="center">
              <template slot-scope="scope">
  <img :src="scope.row.cover|imgUrl" alt class="cover-img" style="width:140px;" />
</template>
            </el-table-column>
            <el-table-column label="状态" width="130px" align="center">
              <template slot-scope="scope">
  <el-tag :type="scope.row.status==1?'success':'danger'">{{ scope.row.status==1?'已上线':'已下线' }}</el-tag>
</template>
            </el-table-column>
            <el-table-column label="排序" width="100px" align="center">
              <template slot-scope="scope">
  <span>{{ scope.row.sort }}</span>
</template>
            </el-table-column>
            <el-table-column label="创建时间" width="160px" align="center">
              <template slot-scope="scope">
  <span>{{ scope.row.create_time }}</span>
</template>
            </el-table-column>
            <el-table-column label="修改时间" width="160px" align="center">
              <template slot-scope="scope">
  <span>{{ scope.row.modify_time }}</span>
</template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              min-width="240"
              class-name="small-padding"
            >
              <template slot-scope="scope">
  <el-button v-if="scope.row.status==0" type="primary" size="mini" @click="setOnline(scope.row)">上线</el-button>
  <el-button v-if="scope.row.status==1" type="danger" size="mini" @click="setOffline(scope.row)">下线</el-button>
  <el-button type="primary" size="mini" @click="editRow(scope.row)">修改</el-button>
  <el-button size="mini" type="danger" @click="deleteRow(scope.row)">删除</el-button>
</template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              :current-page.sync="listQuery.page"
              :page-sizes="[10,20,30, 50]"
              :page-size="listQuery.pageSize"
              :total="total"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible" width="700px">
            <el-form
              ref="dataForm"
              :rules="rules"
              :model="temp"
              label-position="left"
              label-width="120px"
              style="margin-left:50px;margin-right:50px;"
            >
              <el-form-item label="分类名称" prop="title">
                <el-input v-model="temp.title" placeholder="分类名称" />
              </el-form-item>
              <el-form-item label="父分类">
                <el-cascader
                  :props="defaultProps"
                  :options="categoryOptions"
                  v-model="temp.path"
                  change-on-select
                />
              </el-form-item>
              <!-- <el-form-item label="页面路径" prop="page_path">
              <el-input v-model="temp.page_path" placeholder="页面路径"/>
              </el-form-item>-->
              <el-form-item label="排序号" prop="sort">
                <el-input-number v-model="temp.sort" placeholder="排序号" />
              </el-form-item>
              <el-form-item label="封面" prop="cover">
                <el-upload
                  :action="UPLOAD_URL"
                  :show-file-list="false"
                  :headers="getHeaders()"
                  :on-success="handleAvatarSuccess('cover')"
                  :before-upload="beforeAvatarUpload"
                  class="avatar-uploader"
                >
                  <img v-if="temp.cover" :src="temp.cover|imgUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button :loading="isSubmiting" type="primary" @click="submitFormAction">确定</el-button>
            </div>
          </el-dialog>
